<template>
    <section>
        <!--工具条-->
        <div style="display: flex;">
            <el-col :lg="16" :md="24" :xl="24">
                <div class="account-msg">
                    <div class="msg-bg">
                    <!-- <div class="grid-content bg-purple" :style="{backgroundColor: titleColor}"> -->
                    <div class="" :style="{backgroundColor: titleColor}">
                        <div class="dev-title">账户信息</div>
                    </div>
                    <div style="display: flex;align-items: center;height: 20vh;" class="">
                        <div style="width: 35%;">
                            <div class="device_img" v-if="!imgloading"> <img :src="imgUrl?imgUrl:require('../../assets/8821c3579490e4c2e82cc6df21f4f43.jpg')"></div>
                        </div>
                        <div style="width: 60%;">
                            <div class="device_p">
                                <div class="device_title">
                                    <h4 class="ng-binding">{{facility.name}}</h4>
                                    <div class="ng-binding">{{facility.deviceSn}}</div>
                                </div>
                                <div class="ng-binding"><label class="ng-binding">用户名： </label>{{useritem.userName}}</div>
                                <div class="ng-binding"><label class="ng-binding">账号类型： {{useritem.authTypeName}}</label>
                                </div>
                                <div class="ng-binding"><label class="ng-binding">电话号码：</label>{{useritem.phone}}</div>
                                <div class="ng-binding"><label class="ng-binding">邮箱：</label>{{useritem.email}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="account-msg" style="margin-top: 2vh;display: flex;justify-content: space-between;">
                    <!-- 设备在线数统计 -->
                    <el-col :lg="8" :md="24" class="msg-bg">
                        <div class="grid-content bg-purple" :style="{backgroundColor: titleColor}">
                            <div class="dev-title">设备在线数统计</div>
                        </div>
                        <div style="padding:12px 15px;overflow: initial;display: flex;align-items: center;">
                            <div id="vertical" :span="24" style="width:50%; height:20vh; float: left;"></div>
                            <div>
                                <div class="device_item_list">在线<span>{{device_mylist.onlineCount}}</span></div>
                                <div class="device_item_list">离线<span>{{device_mylist.offlineCount}}</span></div>
                                <div class="device_item_list">总数<span>{{device_mylist.totalCount}}</span></div>
                            </div>
                        </div>
                    </el-col>
                    <!-- 问题统计 -->
                    <el-col :lg="7" :md="24" class="msg-bg">
                        <div class="grid-content bg-purple" :style="{backgroundColor: titleColor}">
                            <div class="dev-title">问题统计</div>
                        </div>
                        <div style="padding:12px 15px;overflow: initial;display: flex;align-items: center;">
                            <div id="vertica2" :span="24" style="width:50%; height:20vh; float: left;"></div>
                            <div>
                                <div class="device_item_list">已处理<span>{{orderList.onlineCount}}</span></div>
                                <div class="device_item_list">未处理<span>{{orderList.offlineCount}}</span></div>
                                <div class="device_item_list">总数<span>{{orderList.totalCount}}</span></div>
                            </div>
                        </div>
                    </el-col>
                    <!-- 告警统计 -->
                    <el-col :lg="8" :md="24" class="msg-bg">
                        <div class="grid-content bg-purple" :style="{backgroundColor: titleColor}">
                            <div class="dev-title">告警数统计</div>
                        </div>
                        <div style="padding:12px 15px;overflow: initial;display: flex;align-items: center;">
                            <div id="vertical1" :span="24" style="width:50%; height:20vh; float: left;"></div>
                                <div>
                                <div class="device_item_list">误报<span>{{alarm_count.distort}}</span></div>
                                <div class="device_item_list">未处理<span>{{ alarm_count.noProcess}}</span></div>
                                <div class="device_item_list">已处理<span>{{ alarm_count.prcessed}}</span></div>
                            </div>
                        </div>
                    </el-col>
                </div>
            </el-col>
            <!-- 所属组织 -->
            <el-col :lg="8" :md="24">
                <div style="min-height: 52vh;" class="msg-bg">
                    <div class="grid-content bg-purple" :style="{backgroundColor: titleColor}">
                        <div class="dev-title">所属组织</div>
                    </div>
                    <div style="overflow:auto;padding: 20px;">
                        <el-col v-for="item in userclist1" class="userlist" :span="8">
                            <div style=" width:100px;word-break:keep-all;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;">{{item.name}}</div>
                            <span style="color:#f60">{{item.count}}</span>
                        </el-col>
                    </div>
                </div>
            </el-col>
        </div>
    <div style="margin-top: 20px;">
        <div style="overflow: hidden;">
            <el-radio-group v-model="times" @change="selectTime" style="float:right;">
                <el-radio-button label="1">月</el-radio-button>
                <el-radio-button label="2">年</el-radio-button>
            </el-radio-group>
        </div>
        <div id="vertical3" :span="24" style="width:100%; height:20vh; "></div>
    </div>

        <!--列表-->
        <!--编辑界面-->
        <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="80px" ref="editForm">
                    <el-form-item label="数据点值" prop="name">
                        <el-input v-model="value2" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit">提交</el-button>
                </div>
            </div>
        </el-dialog>

    </section>
</template>
<script>
    import echarts from "echarts";
    import {
        company_get_my,
        device_my,
        alarm_log_count,
        device_new_up,
        device_query_location_count,
        device_get_query_user_count,
        userinfo,
        company_weixin_my,
        user_querycompany,
        device_get_user_count,
        conversation_query,
        conversation_data_sum
    } from '../../api/api';
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                mpQrcode:'',//二维码
                initQCode: '',
                imgloading: true,
                area: '',
                wife: '',
                imgUrl: '',
                editForm: '',
                editFormVisible: false,
                value2: '',
                device_list: '',
                filters: {
                    name: ''
                },
                useritem: '',
                loading: false,
                users: [],
                facility: {},
                selectlist: {
                    name: '',
                    unit: ''
                },
                t: '',
                vertical: '',
                vertical1: '',
                vertical2:'',
                chartColumn: '',
                device_mylist: '',
                alarm_count: '',
                device_new_uplist: [],
                address: '',
                cityDatas: '',
                cityData: '',
                userclist1: '',
                total1: '',
                listLoading: '',
                locationlist: '',
                firmlist: "",
                processedNum: null, //已处理工单数量
                unprocessedNum: null, //未处理工单数量
                processedList:null,//已处理
                unprocessedList:null,//未处理
                times:'1',
                eaharstitle:'近30天问题情况',//jin 
                vertical3:''
            }
        },
        computed:{
            titleColor(){
                return this.$store.state.titleColor
            },
            orderList(){
                return {
                    onlineCount: this.processedNum,
                     offlineCount : this.unprocessedNum,
                    totalCount: this.processedNum + this.unprocessedNum
                }
            }
        },
        methods: {
            selectTime(e){
                // console.log(e)
                if(e == 1){//月
                    this.getproblemList(1,30,0)
                    this.getproblemList(1,30,1)
                    this.eaharstitle = '近30天问题情况'
                }else if(e == 2){//年
                    this.getproblemList(3,12,0)
                    this.getproblemList(3,12,1)
                    this.eaharstitle = '近一年问题情况'
                }
            },
            //获取工单列表
            getOrder(state) {
                //state：0未处理，state：1已处理
                let para = {
                    state: state,
                };
                conversation_query(para).then((res) => {
                    // console.log('===============res=========================',res)
                    if(state == 0){
                        this.unprocessedNum = res.data.totalCount;
                    }else if(state == 1){
                        this.processedNum  = res.data.totalCount;
                    }
                    this.drawvertical2()
                });
            },
            //问题走势图
            getproblemList(type,num,state){
                let para = {
                    type: type,
                    num: num,
                    endDate: this.getToday(),
                    state: state
                }
                conversation_data_sum(para).then(res => {
                    if(state == 0){
                        this.processedList = res.data
                    }else if(state == 1){
                        this.unprocessedList = res.data
                    }
                    this.drawProblemLine()
                })
            },
            drawProblemLine(){
                console.log(this.processedList)
                console.log(this.unprocessedList)
                let proList = []
                let prlNameList = []
                let unproList = []
                let unprlNameList = []
                if(this.processedList){
                    for(let i in this.processedList){
                        proList.push(this.processedList[i].sums) //数据数组
                        prlNameList.push(this.processedList[i].days) //名称数组
                    }
                }
                if(this.unprocessedList){
                    for(let i in this.unprocessedList){
                        unproList.push(this.unprocessedList[i].sums)//数据数组
                    }
                }
                if(this.processedList && this.unprocessedList){
                    this.vertical3 = echarts.init(document.getElementById("vertical3"));
                    this.vertical3.setOption({
                        title: {
                            // text: '近30天问题情况'
                            text: this.eaharstitle
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['未处理','已处理']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '10%',
                            // containLabel: true
                        },
                        toolbox: {
                            feature: {
                                // saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: prlNameList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                            name: '未处理',
                            type: 'line',
                            // stack: 'Total',
                            data: proList
                            },
                            {
                            name: '已处理',
                            type: 'line',
                            // stack: 'Total',
                            data: unproList
                            }
                        ]
                    })
                }
            },
            //获取今天的时间
            getToday(){
                let data = new Date()
                let year = data.getFullYear()
                let mounth = data.getMonth()+1
                let day = data.getDate()
                let nowtime = year+'-'+mounth+'-'+day
                return nowtime
            },
            select_scade1(s) {
    
            let para = {
                queryUserId: this.scade,
                queryCompanyId: this.scade1
            };
            //NProgress.start();
            device_get_user_count(para).then(res => {
                this.begCode(res.code, res.message);
                this.linecount = res.data;
                //NProgress.done();
                this.drawvertical();
            });
             },
             handleCurrentChange1(val) {
      this.page1 = val;
      this.getUsers1();
    },
            handleCurrentChange(val) {
                this.page1 = val;
                this.getUsers1();
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            getUsers1() {

                let para = {
                    pageNo: this.page1,
                    pageSize: 1000,
                };
                device_get_query_user_count(para).then((res) => {
                    if(res.code == 0){
                        this.begCode(res.code,res.message);
                        this.userclist1 = res.data.list;
                        this.total1 = res.data.totalCount;
                    }
                });
            },
            location_count() {
                let para = {
                    province: this.cityData[this.area].text,
                    city: this.address,
                };
                device_query_location_count(para).then((res) => {
                     this.begCode(res.code,res.message);
                    this.locationlist = res.data
                });
            },
            addresslist(s) {
                this.address = "";
                this.cityDatas = this.cityData[this.area].children;
                this.location_count();
            },
            drawColumnChart() {

                this.chartColumn = echarts.init(document.getElementById("chartColumn"));
                this.chartColumn.setOption({
                    title: {
                        text: "近30天新增设备数",
                        textStyle: {
                            color: '#000'
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                        }
                    },

                    toolbox: {
                        show: true,
                        iconStyle: {
                            color: '#000'
                        },
                        feature: {

                            magicType: {
                                type: ['line', 'bar']
                            },

                        }
                    },
                    xAxis: {
                        type: 'time',
                        name: '时间',

                        boundaryGap: true,
                        data: [],
                        axisLabel: {
                            color: '#000',
                        },
                        axisLine: {
                            lineStyle: {

                                color: '#000'
                            }
                        }
                    },

                    yAxis: {
                        name: '设备数',
                        type: 'value',
                        axisLine: {
                            lineStyle: {

                                color: '#000'
                            }
                        },

                        axisLabel: {
                            color: '#000'
                        }
                    },
                    series: [{

                        itemStyle: {
                            normal: {
                                color: '#000'
                            }
                        },
                        name: "新增设备",
                        type: "bar",
                        data: this.device_new_uplist,
                        stack: '总量',
                        smooth: true,
                        barGap: 0
                    }]
                });
            },
            drawvertical2() {
                this.vertical2 = echarts.init(document.getElementById("vertica2"));
                this.vertical2.setOption({
                    title: {
                        // text: "问题处理统计",
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },


                    series: [{

                        name: "问题处理统计",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "20",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: this.processedNum,
                                name: "已处理"
                            },
                            {
                                value: this.unprocessedNum,
                                name: "未处理"
                            }
                        ],
                        itemStyle: {
                            color: function (params) {
                                //自定义颜色
                                var colorList = [
                                    '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            }

                        }
                    }]
                });
            },
            drawvertical1() {
                this.vertical1 = echarts.init(document.getElementById("vertical1"));
                this.vertical1.setOption({
                    title: {
                        // text: "告警数量统计",
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },


                    series: [{

                        name: "告警数量统计",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "20",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: this.alarm_count.prcessed,
                                name: "已处理"
                            },
                            {
                                value: this.alarm_count.noProcess,
                                name: "未处理"
                            },
                            {
                                value: this.alarm_count.distort,
                                name: "误报"
                            }
                        ],
                        itemStyle: {
                            color: function (params) {
                                //自定义颜色
                                var colorList = [
                                    '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            }

                        }
                    }]
                });
            },
            drawvertical() {
                console.log(this.device_mylist)
                this.vertical = echarts.init(document.getElementById("vertical"));
                this.vertical.setOption({
                    title: {
                        // text: "设备在线数统计",
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },

                    series: [{
                        name: "设备在线数统计",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "20",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            color: function (params) {
                                //自定义颜色
                                var colorList = [
                                    '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            }

                        },
                        data: [
                            // {
                            //   value: this.users.length,
                            //   show:false,
                            //   name: "设备总数"
                            // },
                            {
                                value: this.device_mylist.onlineCount,
                                name: "在线设备"
                            },
                            {
                                value: this.device_mylist.offlineCount,
                                name: "离线设备"
                            }
                        ]
                    }]
                });
            },
            // scade1(index, row) {
            //     let para = {
            //         code: 'getLowerComputerRegister',
            //         deviceIdList: [sessionStorage.getItem('facility_details')],
            //         attrs: {
            //             deviceSlaveId: sessionStorage.getItem('facility_details'),
            //             registerFirstAddr: row.register,
            //             count: 1
            //         }
            //     };
            //     this.loading = true;
            //     //NProgress.start();
            //     device_cmd(para).then((res) => {
            //          this.begCode(res.code,res.message);

            //         this.getbodylist();
            //         //NProgress.done();
            //     });
            // },
            scade(index, row) {

                // this.$confirm('确认更换吗？', '提示', {}).then(() => {
                let para = {
                    code: 'writeRegister',
                    deviceIdList: [sessionStorage.getItem('facility_details')],
                    attrs: {
                        deviceSlaveSn: row.slaveSn,
                        register: row.register,
                        registerVal: row.registerVal,
                        deviceType: 1
                    }
                };
                this.loading = true;
                //NProgress.start();
                device_cmd(para).then((res) => {
                    if(res.code == 0){
                        this.begCode(res.code,res.message);
                        this.getbodylist();
                        //NProgress.done();
                    }
                });
                // });
            },
            fromedit(index, row) {
                this.editFormVisible = true;
                this.editForm = row;
            },
            editSubmit() {

                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    let para = {
                        code: 'writeRegister',
                        deviceIdList: [sessionStorage.getItem('facility_details')],
                        attrs: {
                            deviceSlaveSn: this.editForm.slaveSn,
                            register: this.editForm.register,
                            registerVal: this.value2
                        }
                    };
                    this.loading = true;
                    //NProgress.start();
                    device_cmd(para).then((res) => {
                         this.begCode(res.code,res.message);

                        this.loading = true;
                        this.$message({
                            message: '下发命令成功',
                            type: 'success'
                        });
                        this.editFormVisible = false;
                        //NProgress.done();

                        this.value2 = '';
                    });
                });
            },
            //            tableHeaderColor({
            //     row,
            //     column,
            //     rowIndex,
            //     columnIndex
            // }) {
            //     if (rowIndex === 0) {
            //         return 'background-color: #eee;font-weight: 500;'
            //     }
            // },
            //性别显示转换
            handlehisty: function (index, row) {

                sessionStorage.setItem('pointid', row.register)
                this.$router.push({
                    path: "/devices/history"
                });
            },
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            formatwife(row) {
                // if (row) {
                //     return row.signalIntensity == 0 ? '很弱' : row.signalIntensity == 1 ? '弱' : row.signalIntensity == 2 ?
                //         '一般' : row.signalIntensity ==
                //         3 ? '普通' : row.signalIntensity == 4 ? '强' : row.signalIntensity == 5 ? '很强' : ' 未知';
                // } else {
                //     return '未知';
                // }
                if (row) {
                    return row.signalIntensity;
                } else {
                    return 0;
                }


            },
            map1() {
                let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
                // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
                map.addControl(
                    new BMap.MapTypeControl({
                        //添加地图类型控件
                        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                    })
                );

                // var map = new BMap.Map("container");
                var point = new BMap.Point(this.facility.longitude, this.facility.latitude);

                let s = this.convert(point);
                map.centerAndZoom(s, 15);
                var marker = new BMap.Marker(s); // 创建标注    
                map.addOverlay(marker);
                var opts = {
                    width: 200, // 信息窗口宽度
                    height: 100, // 信息窗口高度
                    title: "地址信息", // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: this.facility.address + "~"
                }
                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象    
                map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
                map.addOverlay(marker); // 将标注添加到地图中

                var infoWindow = new BMap.InfoWindow("地址:" + this.facility.address, opts); // 创建信息窗口对象 
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, s); //开启信息窗口

                });

                // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
                // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

            },
            //获取用户列表
            getUser: function () {

                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                this.loading = true;
                //NProgress.start();
                company_get_my(para).then((res) => {
                    // res.code=403;
                     this.begCode(res.code,res.message);
                    if (res.data) {
                        this.users = res.data.deviceSlaveList;
                        this.facility = res.data;
                        this.wife = this.formatwife(res.data.deviceAttr);
                        if (res.data.logo) {

                            this.imgUrl = res.data.logo;
                        } else {

                            // this.imgUrl = '/static/img/143217104131987003.png';
                        }
                    }

                    this.loading = false;


                    this.imgloading = false;
                    console.log(this.imgloading)
                    // this.map1()
                    //NProgress.done();
                });
                let para1 = {
                    token: localStorage.getItem('key')
                }
                userinfo(para1).then((res) => {
                    if(res.code == 0){
                        this.useritem = res.data;
                    }
                localStorage.setItem('user', JSON.stringify(res.data))
                });
                console.log(this.useritem)


            },
            getbodylist() {
                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                device_recipe_body_list(para).then((res) => {
                     this.begCode(res.code,res.message);
                    for (let i in res.data) {
                        let para1 = {
                            deviceRecipePictureGroupId: res.data[i].deviceRecipePictureGroupId
                        };
                        // if (res.data[i].decimalAccuracy) {

                        //     res.data[i].registerVal = res.data[i].registerVal / Math.pow(10,
                        //         res.data[i].decimalAccuracy);
                        // }
                        if (res.data[i].deviceRecipePictureGroupId) {


                        }
                        let ti = setTimeout(() => {
                            // this.updatelist();
                            // this.device_list = res.data;
                            if (!this.selectlist.name && !this.selectlist.unit) {
                                this.device_list = res.data;
                                return false;
                            }

                            this.device_list = [];
                            for (let i in res.data) {
                                // if(this.selectlist.name==res.data.)
                                if (res.data[i].name.indexOf(this.selectlist.name) >= 0 && this.selectlist
                                    .name != "") {
                                    console.log(res.data[i].communicateStateText)
                                    this.device_list.push(res.data[i]);
                                } else if (res.data[i].writeRead == this.selectlist.unit && this.selectlist
                                    .unit != "") {

                                    this.device_list.push(res.data[i]);
                                }
                            }
                        }, 300);
                        // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


                    }

                    // this.loading = false;
                    //NProgress.done();
                });
            }
        },
        mounted() {
            this.getOrder(0)
            this.getOrder(1)
            this.getproblemList(1,30,0)
            this.getproblemList(1,30,1)
            // this.cityData = cityData;
             let parauser = {
      pageNo: 1,
      pageSize: 9999,
      type: 1
    };
 
    user_querycompany(parauser).then(res => {
        if(res.code == 0){
            this.begCode(res.code, res.message);
            this.firmlist = res.data.list;
            this.select_scade1();
        }
    });
    // this.usertype = JSON.parse(sessionStorage.getItem("user")).type;
            this.getUser();
            company_weixin_my().then((res) => {
                if (res.code == 0) {
                    if (res.data) {
                        console.log(this.initQCode);
                        console.log(res);
                        // this.initQCode='888888888888888';
                        this.mpQrcode = res.data.mpQrcode
                        this.companyId = res.data.companyId;
                        console.log(this.companyId)
                        this.initQCode = '/api/auth/wechat/bind_alarm?appId=' +
                            res.data.appId + '&companyId=' + this.companyId;
                    } else {

                        this.companyId = res.data.companyId;
                        // this.initQCode='/api/auth/wechat/bind_alarm?appId='+res.data.appId+'&companyId='+this.companyId;
                        // console.log(this.initQCode)
                        this.mptype = 1
                    }
                }

            });
            this.getUsers1();
            device_my().then((res) => {
                if(res.code == 0){
                    this.device_mylist = res.data;
                }
                this.drawvertical();
            });
            device_new_up().then((res) => {
                if(res.code == 0){
                    for (let i in res.data) {
                        this.device_new_uplist.push([res.data[i].day, res.data[i].count])
                    }
                }

                // this.drawColumnChart();
            });
            alarm_log_count().then((res) => {
                if(res.code == 0){
                    this.alarm_count = res.data;
                    this.drawvertical1();
                }
            })
            let _this = this;
            window.addEventListener('resize', ()=> {
                _this.vertical.resize();
                _this.vertical3.resize();
                -this.vertical2.resize();
                _this.vertical1.resize();
            })
            // window.onresize = function(){
            //     console.log(1);
            //     return (() => {
            //         _this.vertical.resize();
            //         _this.vertical3.resize();
            //         _this.vertical1.resize();
            //     })()
            // }

        },
        destroyed: function () {
            clearInterval(this.t)
        },
    };
</script>

<style scoped>
    .userlist {
        font-size: 14px;
    }

    #allmap {
        height: 300px;
        overflow: hidden;
    }

    .el-row {}

    .el-col {
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .el-row>.el-col {
        border-radius: 4px;
        margin-bottom: 0;
    }



    .grid-content {
        border-radius: 4px;
        /* min-height: 36px; */
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .dev-select {
        width: 100px;
        float: right;
        margin: 3px;
    }

    .dev-title {
        display: inline-block;
        line-height: 36px;
        text-indent: 10px;
        color: #fff
    }

    .device_img {
        width: 100%;
        height: auto;
        text-align: center;
        /* margin-bottom: 15px; */
        /* border: 1px solid #eee; */
    }

    .device_img img {
        /* max-width: 265px; */
        /* width: 100%; */
        height: 100px;
    }

    .col-bg {
        /* padding: 12px 15px; */
        position: relative;
        /* height: 100%; */
        color: #666666;
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;
        /* margin-bottom: 20px; */
        padding: 0;
        margin-bottom: 0;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
    }
    .msg-bg{
        color: #666666;
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        /* border-top-right-radius: 0;
        border-top-left-radius: 0; */
        position: relative;
        padding: 0;
        margin-bottom: 0;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
        height: 100%;
    }
    .device_title {
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }

    .device_title h4 {
        line-height: 30px;
        font-size: 16px;
        color: #333;
        margin: 0 auto;
    }

    .device_title p {
        line-height: 30px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #666;
    }

    .device_p p {
        line-height: 26px;
        margin: 0;
        color: #333;
        font-size: 12px;
    }

    .monitor_data_list2 {
        line-height: 26px;
        padding: 15px 0;
        font-size: 12px;
        color: #000;
        clear: both;
        margin: 10px 0;
        background: #eee;
    }

    /* .el-table tr {
        position: absolute;
        top: 100px
    } */

    .el-table {

        background-color: #eee !important;
    }

    .cell {
        padding-left: 10px !important;
    }

    .ng-binding img {
        vertical-align: middle
    }



    .el-input__icon {
        line-height: 28px !important;
    }
    .account-msg{
        /* min-height: 30vh; */
        height: 25vh;
        padding: 0 10px;
        /* overflow: hidden; */
    }
</style>